<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<button id="btn">点击创建一个输入框</button>
		</div>
		<!-- 存放输入框的区域 -->
		<div id="inp_div">
			
		</div>
		<script type="text/javascript">
			// 获取到按钮
			const btn = document.getElementById('btn');
			// 按钮绑定点击事件
			btn.onclick = () => {
				// 创建输入框
				const inp = document.createElement('input')
				// 添加样式
				inp.className = 'inp'
				// 将输入框放入inp_div 
				document.getElementById('inp_div').appendChild(inp)
				// 输入框获取到焦点
				// 注意这行代码必须放在将输入框添加到页面之后才生效
				inp.focus()
				// 设置 inp 的父元素的样式
				// 这行代码同样要放在将输入框添加到页面之后才生效。因为要先找到inp元素才能找到其父元素给他设置样式
				inp.parentElement.style.backgroundColor = 'red'
				
			}
		</script>
		<style>
			.inp {
				background-color: aqua;
			}
		</style>
	</body>
</html>